<template>
  <div class="authenticationIng">
    <el-table :data="userListDtos" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="ID" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信昵称" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.nick_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="微信头像" width="160" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <img :onError="defaultImg" :src="scope.row.head_img">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.user_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.gender }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.phone_no }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="入住小区" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.community_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="幢" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.area_building }}幢</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单元" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.area_single }}单元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="入住房屋" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.area_rooms }}室</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="入住身份" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.relations_with_households }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="申请认证时间" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.apply_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="申请成功时间" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.apply_success_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-button size="mini" type="success" @click="agree(scope.row)">同意</el-button>
            <el-button size="mini" type="danger" @click="refuse(scope.row)">拒绝</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 同意申请 -->
    <el-dialog :visible.sync="DataFrom" width="30%">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <span>确定执行该操作吗？</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DataFrom = false">取消</el-button>
        <el-button v-if="agreee" type="success" @click="dataFroms">确定通过</el-button>
        <el-button v-if="pass" type="primary" @click="passFroms">确定拒绝</el-button>
      </div>
    </el-dialog>
    <!-- 分页器 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message, popconfirm } from 'element-ui'
import { getToken, getAccount, getButtonpermsStr } from '@/utils/auth'
import defaultImg from '../../assets/default/2.jpg'
export default {
  data() {
    return {
      DataFrom: false,
      userListDtos: [],
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageNum: 1, // 总数页数，
      total: 0,
      rules: {},
      temp: {},
      agreee: false,
      pass: true,
      buttonpermsStr: getButtonpermsStr(),
      button1: false,
      button2: false,
      defaultImg: 'this.src="' + defaultImg + '"'
    }
  },
  mounted() {
    if (this.buttonpermsStr !== undefined) {
      if (this.buttonpermsStr.indexOf(171) > -1) {
        this.button1 = true
      }
      if (this.buttonpermsStr.indexOf(172) > -1) {
        this.button2 = true
      }
    }
    this.getList()
  },
  methods: {
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getAdminList()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getAdminList()
    },
    // 同意申请
    agree(row) {
      this.DataFrom = true
      this.agreee = true
      this.pass = false
      this.temp = {
        user_id: row.user_id
      }
    },
    // 拒绝申请
    refuse(row) {
      this.DataFrom = true
      this.agreee = false
      this.pass = true
      this.temp = {
        user_id: row.user_id
      }
    },
    // 确定同意申请
    dataFroms() {
      return request({
        url: '/v3/admin/update/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        Message({
          message: '审批通过',
          type: 'success',
          duration: 0.5 * 1000
        })
        this.DataFrom = false
        this.$router.go(0) // 刷新页面
      })
    },
    // 确定拒绝申请
    passFroms() {
      return request({
        url: '/v3/admin/updateId/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        Message({
          message: '已拒绝申请',
          type: 'success',
          duration: 0.5 * 1000
        })
        this.DataFrom = false
        this.$router.go(0) // 刷新页面
      })
    },

    // 获取所有
    getList() {
      return request({
        url: '/v3/admin/appuser/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: {
          current_page: this.currentPage,
          page_size: this.pagesize,
          appuser_id: 0,
          user_id: 0,
          community_id: 0,
          area_id: 0
        }
      }).then(res => {
        this.total = res.total_record
        this.currentPage = res.current_page
        this.pageNum = res.pages
        this.userListDtos = []
        res.userListDtos.map((value, index) => {
          var d = new Date(value.apply_success_time)
          value.apply_success_time =
            d.getFullYear() +
            '-' +
            (d.getMonth() + 1) +
            '-' +
            d.getDate() +
            ' ' +
            d.getHours() +
            ':' +
            d.getMinutes() +
            ':' +
            d.getSeconds()
          var t = new Date(value.apply_time)
          value.apply_time =
            t.getFullYear() +
            '-' +
            (t.getMonth() + 1) +
            '-' +
            t.getDate() +
            ' ' +
            t.getHours() +
            ':' +
            t.getMinutes() +
            ':' +
            t.getSeconds()
        })
        this.userListDtos = res.userListDtos
      })
    }
  }
}
</script>
<style lang = "scss" scoped>
.authenticationIng {
  margin-top: 60px;
}
</style>
